:root{
    --primary:#59AC77;
    --bos:#FFF9E5;
   --primary:#20883A;
     --mantap:#D6A309;
}

*{
    border: none;
    outline: none;
    text-decoration:none;
    box-sizing: border-box ;
}
/* Reset dan font */

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  min-height:100vh;
  background-image:url(/bg-green.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center;
}
nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index: 9999;
    color:white;
    background-color:var(--primary) ;
}
nav a{
    color:WHITE;
}
.navbar .dropdown-menu li a{
    text-decoration: none;
    color:black;
    transition:all .5s ease;
    font-size:15px;
}
.navbar .dropdown-menu li a:hover{
    color:white;
}
.navbar .dropdown-menu li{
    padding:10px;
}
.navbar .dropdown-menu li:hover{
    background-color:var(--primary);
} 
.navbar-nav{
    gap:20px;
}
.navbar-brand{
    font-size:3rem;
    font-weight:bold;
}
.nav-item{
    font-size:1rem;
}
.navbar-nav .nav-item a{
    font-size:17px;
}

header {
  background-color:var(--bg);
  color: white;
  padding: 50px 20px;
  text-align: center;
  margin-top:5rem;
  font-size: x-large;

}

header h1 {
   font-family: "Raleway", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
   font-weight:bold;
  margin: 0;
  font-size:2em;
  font-weight:bold;
  color:var(--mantap);
  margin-bottom:1rem;
}
.white{
  color:grey;
}
main {
  width:100%;
  padding: 40px 20px;
  max-width: 800px;
  margin: auto;
}
.visi p{
  color:grey;
  font-weight: 300;
}

section {
  margin-bottom: 40px;
  background-color: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

section h2 {
  color:black;
  margin-bottom: 15px;
}

section p, section ul {
  font-size: 1.1em;
  line-height: 1.6;
}
main
ul {
  padding-left: 20px;
}
ul li{
  font-weight:300;
  color:grey;
}

footer {
  color:grey;
  text-align: center;
  padding: 15px;
  margin-top: 40px;
  font-size:1.3em;
  
}

@media(max-width:768px){

    html{
       font-size: 80%;
       padding-right:3.8rem;
    }
    header h1{
      font-size:x-large;
    }
    header p{
      font-size:large;
    }

     footer{
      padding-top:2rem;

      position:absolute;
      bottom:0;
      transform: translateX(0%);
      width:100%;
      margin-bottom:0rem;

    }
  }
@media(max-width:986px){
   html{
       font-size: 80%;
    }

    .navbar-nav{
        padding-top:3rem;
    }
   
  .black{
    font-size: 15px;
  }
  footer{
    padding:3rem 0rem;
  }
}
@media(max-width:450px){
    html{
        font-size:60%;
    }
     .navbar-nav{
      padding-right:20px;
     }
}